<template>
    <a-modal
        v-model:open="visible"
        :title="modalTitle"
        width="800px"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        class="permission-modal"
    >
        <a-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
            class="permission-form"
        >
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="权限名称" name="permissionName">
                        <a-input v-model:value="formData.permissionName" placeholder="请输入权限名称" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="路由标题" name="routeTitle">
                        <a-input v-model:value="formData.routeTitle" placeholder="请输入路由标题" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="路由名称" name="routeName">
                        <a-input v-model:value="formData.routeName" placeholder="请输入路由名称" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="路由路径" name="routePath">
                        <a-input v-model:value="formData.routePath" placeholder="请输入路由路径" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="组件路径" name="componentPath">
                        <a-input v-model:value="formData.componentPath" placeholder="请输入组件路径" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="图标" name="icon">
                        <a-input v-model:value="formData.icon" placeholder="请输入图标名称" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="激活路由" name="activeRoute">
                        <a-input v-model:value="formData.activeRoute" placeholder="请输入激活路由" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="父级ID" name="parentId">
                        <a-input-number
                            v-model:value="formData.parentId"
                            :min="0"
                            style="width: 100%"
                            placeholder="请输入父级ID"
                        />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="排序" name="sortOrder">
                        <a-input-number
                            v-model:value="formData.sortOrder"
                            :min="0"
                            style="width: 100%"
                            placeholder="请输入排序"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="权限级别" name="permissionLevel">
                        <a-select v-model:value="formData.permissionLevel" placeholder="请选择权限级别">
                            <a-select-option :value="1">超级管理员</a-select-option>
                            <a-select-option :value="2">管理员</a-select-option>
                            <a-select-option :value="3">普通用户</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="是否隐藏" name="isHidden">
                        <a-radio-group v-model:value="formData.isHidden">
                            <a-radio :value="0">显示</a-radio>
                            <a-radio :value="1">隐藏</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="状态" name="status">
                        <a-radio-group v-model:value="formData.status">
                            <a-radio :value="1">启用</a-radio>
                            <a-radio :value="0">禁用</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-form-item label="描述" name="description">
                <a-textarea v-model:value="formData.description" :rows="3" placeholder="请输入权限描述" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { SysPermissions } from '@/api/core/prmissions'

interface Props {
    open: boolean
    data?: SysPermissions | null
    loading?: boolean
}

interface Emits {
    (e: 'update:open', value: boolean): void
    (e: 'ok', data: Partial<SysPermissions>): void
    (e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
    data: null,
    loading: false,
})

const emit = defineEmits<Emits>()

const formRef = ref<FormInstance>()
const confirmLoading = ref(false)
const visible = computed({
    get: () => props.open,
    set: (value: boolean) => emit('update:open', value),
})

// 表单数据
const formData = ref<Partial<SysPermissions>>({
    permissionName: '',
    routeTitle: '',
    routeName: '',
    routePath: '',
    componentPath: '',
    icon: '',
    activeRoute: '',
    parentId: 0,
    sortOrder: 0,
    permissionLevel: 3,
    isHidden: 0,
    status: 1,
    description: '',
})

// 表单验证规则
const formRules = {
    permissionName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
    routeTitle: [{ required: true, message: '请输入路由标题', trigger: 'blur' }],
    routeName: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
    routePath: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
    permissionLevel: [{ required: true, message: '请选择权限级别', trigger: 'change' }],
}

// 模态框标题
const modalTitle = computed(() => {
    return props.data ? '编辑权限' : '新增权限'
})

// 监听数据变化
watch(
    () => props.data,
    (newData) => {
        if (newData) {
            formData.value = { ...newData }
        } else {
            resetForm()
        }
    },
    { immediate: true },
)

// 监听打开状态
watch(
    () => props.open,
    (newOpen) => {
        if (newOpen && !props.data) {
            resetForm()
        }
    },
)

// 重置表单
const resetForm = () => {
    formData.value = {
        permissionName: '',
        routeTitle: '',
        routeName: '',
        routePath: '',
        componentPath: '',
        icon: '',
        activeRoute: '',
        parentId: 0,
        sortOrder: 0,
        permissionLevel: 3,
        isHidden: 0,
        status: 1,
        description: '',
    }
    formRef.value?.resetFields()
}

// 处理确定
const handleOk = async () => {
    try {
        await formRef.value?.validate()
        confirmLoading.value = true
        emit('ok', formData.value)
    } catch (error) {
        console.error('表单验证失败:', error)
    } finally {
        confirmLoading.value = false
    }
}

// 处理取消
const handleCancel = () => {
    emit('cancel')
    resetForm()
}

// 暴露方法
defineExpose({
    resetForm,
})
</script>

<style lang="scss" scoped>

.permission-modal {
    :deep(.ant-modal-header) {
        background: var(--permission-modal-header-bg);
        border-bottom: 1px solid var(--permission-modal-border);
    }

    :deep(.ant-modal-title) {
        color: var(--permission-text-primary);
    }

    :deep(.ant-modal-body) {
        background: var(--permission-modal-body-bg);
    }
}

.permission-form {
    :deep(.ant-form-item-label > label) {
        color: var(--permission-text-primary);
        font-weight: 500;
    }

    :deep(.ant-input) {
        background: var(--permission-input-bg);
        border-color: var(--permission-input-border);
        color: var(--permission-input-color);

        &:focus,
        &:hover {
            border-color: var(--permission-primary-color);
        }
    }

    :deep(.ant-select-selector) {
        background: var(--permission-input-bg);
        border-color: var(--permission-input-border);

        .ant-select-selection-item {
            color: var(--permission-input-color);
        }
    }

    :deep(.ant-select-focused .ant-select-selector) {
        border-color: var(--permission-primary-color);
    }

    :deep(.ant-radio-wrapper) {
        color: var(--permission-text-primary);
    }

    :deep(.ant-radio-checked .ant-radio-inner) {
        background-color: var(--permission-primary-color);
        border-color: var(--permission-primary-color);
    }
}
</style>
